<template>
    <view class="logistics-main">
        <view class="logistics-content">
            <view class="goods-info">
                <view class="goods-info-img">
                    <image :src="Data.goodsInfo.goodsImg"></image>
                </view>
                <view class="goods-info-right">
                    <view class="goods-info-name">{{ Data.goodsInfo.goodsName }}</view>
                    <view class="goods-info-express-delivery">快递公司：{{ Data.logisticCompany }}</view>
                    <view class="goods-info-express-delivery-no">
                        快递单号：{{ Data.logisticNo }} <text>|</text><text @click="copy" class="copy-text"> 复制</text>
                    </view>
                </view>
            </view>
            <view class="list" v-if="Data.isLogistics">
                <view class="step-item" v-for="(item, index) in Data.list" :key="index">
                    <view class="step-head">
                        <view class="step-img" v-if="index == 0">
                            <image :src="getImgOssUrl('/ui-prod-2.0.0/icon_img03.png')"></image>
                        </view>
                        <view class="step-img" v-else-if="index == 1">
                            <image :src="getImgOssUrl('/ui-prod-2.0.0/icon_img04.png')"></image>
                        </view>
                        <view class="step-icon" v-else></view>
                        <view class="step-line"></view>
                    </view>
                    <view class="step-box" :class="{ 'step-box-active': index == 0 }">
                        <view class="step-title">
                            <text v-if="index == 0 || index == 1">{{ item.status }}</text
                            >{{ item.time }}
                        </view>
                        <view class="step-content">{{ item.context }}</view>
                    </view>
                </view>
            </view>
            <view class="list no-list" v-else>
                <image class="no-list-img" :src="getImgOssUrl('/ui-prod-2.0.0/close.png')"></image>
                <view class="no-list-text">暂无物流</view>
            </view>
        </view>
        <Loading />
        <!-- 隐私监听 -->
        <el-privacy-listener-popup></el-privacy-listener-popup>
    </view>
</template>
<script setup>
import { reactive } from 'vue';
import { onShow } from '@dcloudio/uni-app';
import { getImgOssUrl } from '@/commons/utils.js';
import request from '@/request';
import store from '@/store';
import Loading from '@/components/el-loading';

const goodsStore = store.useGoodsStore();

const props = defineProps({
    id: {
        type: [String, Number],
        default: ''
    },
    logisticCompany: {
        type: String,
        default: ''
    },
    logisticNo: {
        type: String,
        default: ''
    }
});

const Data = reactive({
    logisticCompany: props.logisticCompany,
    logisticNo: props.logisticNo,
    goodsInfo: goodsStore.logisticsGoodsInfo,
    list: [],
    isLogistics: true
});

onShow(() => {
    getLogistics();
});

const getLogistics = async () => {
    let res = await request('expressInfoServ', { id: props.id });
    Data.list = res.data.data || [];
    if (!Data.list.length) {
        Data.isLogistics = false;
    }
};

const copy = () => {
    uni.setClipboardData({
        data: Data.logisticNo,
        success: () => {}
    });
};
</script>
<style lang="scss" scoped>
.logistics-main {
    background: #f5f5f5;
    .logistics-content {
        font-size: 25rpx;
        .goods-info {
            margin: 18rpx 0;
            padding: 29rpx;
            background: #ffffff;
            display: flex;
            .goods-info-img {
                width: 159rpx;
                height: 159rpx;
                image {
                    width: 100%;
                    height: 100%;
                }
            }
            .goods-info-right {
                padding-left: 18rpx;
                flex: 1;
                .goods-info-name {
                    color: #33302d;
                    line-height: 36rpx;
                }
                .goods-info-express-delivery {
                    padding: 18rpx 0;
                }
                .goods-info-express-delivery-no {
                    text {
                        color: #e2e2e2;
                    }
                    .copy-text {
                        color: #6088ef;
                    }
                }
            }
        }
        .list {
            padding: 29rpx 29rpx 67rpx;
            background: #ffffff;
            .step-item {
                display: flex;
                .step-head {
                    width: 54rpx;
                    .step-img {
                        width: 54rpx;
                        height: 54rpx;
                        image {
                            width: 100%;
                            height: 100%;
                        }
                    }
                    .step-icon {
                        margin: 9rpx auto 0;
                        width: 14rpx;
                        height: 14rpx;
                        background: #d8d8d8;
                        border-radius: 50%;
                    }
                    .step-line {
                        margin: 0 auto;
                        width: 2rpx;
                        height: 100%;
                        background: #f5f5f5;
                    }
                }
                .step-box {
                    flex: 1;
                    padding-left: 22rpx;
                    padding-bottom: 29rpx;
                    color: #999999;
                    font-size: 22rpx;
                    line-height: 31rpx;
                    .step-title {
                        text {
                            padding-right: 22rpx;
                            font-size: 29rpx;
                            line-height: 40rpx;
                        }
                    }
                    .step-content {
                        padding-top: 11rpx;
                    }
                }
                .step-box-active {
                    color: #333333;
                    .step-title {
                        color: #fe292b;
                    }
                }
            }
        }
        .no-list {
            position: absolute;
            // top: 50%;
            left: 50%;
            transform: translateX(-50%);
            text-align: center;
            width: 100%;
            .no-list-img {
                width: 290rpx;
                height: 187rpx;
            }
            .no-list-text {
                padding-top: 29rpx;
                font-size: 29rpx;
                color: #333333;
                line-height: 40rpx;
            }
        }
    }
}
</style>
